<!DOCTYPE html>
<html>
<head>
    <title>企业管理</title>
    <#include "../../include/head-file.ftl"/>
    <link rel="stylesheet" href="${base}/static/ms-admin/4.7.2/css/index.css">
</head>
<body>
<div id="app" class="ms-admin-company-container">
    <el-header class="ms-header" height="50px">
        <el-col :span="24">
            <@ms.search class="ms-search" action="">
                <@ms.searchInput name="keyword" label="请输入企业名称或编号" title="请输入企业名称或编号" value="" />
            </@ms.search>
        </el-col>
    </el-header>
    <el-main class="ms-container">
        <el-table ref="multipleTable" height="calc(100% - 68px)" class="ms-table" border :data="dataList" tooltip-effect="dark" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="40"></el-table-column>
            <el-table-column label="序号" width="80" align="center">
                <template slot-scope="scope">
                    {{ scope.$index + 1 }}
                </template>
            </el-table-column>
            <el-table-column prop="companyCode" label="企业编号" width="100" align="center"></el-table-column>
            <el-table-column prop="companyName" label="企业名称" min-width="180" align="center"></el-table-column>
            <el-table-column prop="companyType" label="企业类型" width="120" align="center"></el-table-column>
            <el-table-column prop="industry" label="所属行业" width="120" align="center"></el-table-column>
            <el-table-column prop="location" label="所在地区" width="150" align="center"></el-table-column>
            <el-table-column prop="contactName" label="联系人" width="100" align="center"></el-table-column>
            <el-table-column prop="contactPhone" label="联系电话" width="150" align="center"></el-table-column>
            <el-table-column prop="cooperationStatus" label="合作状态" width="100" align="center"></el-table-column>
            <el-table-column label="操作" align="center" min-width="180">
                <template slot-scope="scope">
                    <el-link type="primary" :underline="false" @click="handleEdit(scope.row)">编辑</el-link>
                    <el-link type="primary" :underline="false" @click="handleDetails(scope.row)">详情</el-link>
                    <el-link type="primary" :underline="false" @click="handleDelete(scope.$index, scope.row)">删除</el-link>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                class="ms-pagination"
                background
                layout="prev, pager, next"
                :total="total"
                :current-page.sync="pageNum"
                :page-size="pageSize"
                @current-change="handleCurrentChange">
        </el-pagination>
    </el-main>
    <ms-dialog :title="companyForm.id ? '编辑企业' : '添加企业'" :visible.sync="dialogVisible" width="70%">
        <el-form ref="companyForm" :model="companyForm" :rules="rules" label-width="120px" size="small">
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="企业编号" prop="companyCode">
                        <el-input v-model="companyForm.companyCode"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="企业名称" prop="companyName">
                        <el-input v-model="companyForm.companyName"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="企业类型" prop="companyType">
                        <el-select v-model="companyForm.companyType" placeholder="请选择企业类型" style="width: 100%">
                            <el-option label="国有企业" value="国有企业"></el-option>
                            <el-option label="民营企业" value="民营企业"></el-option>
                            <el-option label="外资企业" value="外资企业"></el-option>
                            <el-option label="合资企业" value="合资企业"></el-option>
                            <el-option label="其他" value="其他"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="所属行业" prop="industry">
                        <el-input v-model="companyForm.industry"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="所在地区" prop="location">
                        <el-input v-model="companyForm.location"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="注册资本" prop="registeredCapital">
                        <el-input v-model="companyForm.registeredCapital">
                            <template slot="append">万元</template>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="成立日期" prop="foundingDate">
                        <el-date-picker
                                v-model="companyForm.foundingDate"
                                type="date"
                                placeholder="选择日期"
                                style="width: 100%">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="员工规模" prop="employeeScale">
                        <el-select v-model="companyForm.employeeScale" placeholder="请选择员工规模" style="width: 100%">
                            <el-option label="50人以下" value="50人以下"></el-option>
                            <el-option label="50-200人" value="50-200人"></el-option>
                            <el-option label="200-500人" value="200-500人"></el-option>
                            <el-option label="500-1000人" value="500-1000人"></el-option>
                            <el-option label="1000人以上" value="1000人以上"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="联系人" prop="contactName">
                        <el-input v-model="companyForm.contactName"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="联系电话" prop="contactPhone">
                        <el-input v-model="companyForm.contactPhone"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="联系邮箱" prop="contactEmail">
                        <el-input v-model="companyForm.contactEmail"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="合作状态" prop="cooperationStatus">
                        <el-select v-model="companyForm.cooperationStatus" placeholder="请选择合作状态" style="width: 100%">
                            <el-option label="潜在" value="潜在"></el-option>
                            <el-option label="洽谈中" value="洽谈中"></el-option>
                            <el-option label="已合作" value="已合作"></el-option>
                            <el-option label="合作结束" value="合作结束"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="合作项目数量" prop="cooperationProjectCount">
                        <el-input-number v-model="companyForm.cooperationProjectCount" :min="0" style="width: 100%"></el-input-number>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="技术需求倾向" prop="techDemandTendency">
                        <el-input v-model="companyForm.techDemandTendency"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="24">
                    <el-form-item label="主营业务" prop="mainBusiness">
                        <el-input type="textarea" v-model="companyForm.mainBusiness" :rows="2"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="24">
                    <el-form-item label="企业简介" prop="companyProfile">
                        <el-input type="textarea" v-model="companyForm.companyProfile" :rows="3"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="24">
                    <el-form-item label="备注" prop="remarks">
                        <el-input type="textarea" v-model="companyForm.remarks" :rows="2"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <span slot="footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveCompany">确 定</el-button>
        </span>
    </ms-dialog>
    
    <!-- 企业详情弹窗 -->
    <el-dialog title="企业详情" :visible.sync="detailsVisible" width="70%">
        <el-descriptions :column="2" border>
            <el-descriptions-item label="企业编号">{{ companyDetails.companyCode }}</el-descriptions-item>
            <el-descriptions-item label="企业名称">{{ companyDetails.companyName }}</el-descriptions-item>
            <el-descriptions-item label="企业类型">{{ companyDetails.companyType }}</el-descriptions-item>
            <el-descriptions-item label="所属行业">{{ companyDetails.industry }}</el-descriptions-item>
            <el-descriptions-item label="所在地区">{{ companyDetails.location }}</el-descriptions-item>
            <el-descriptions-item label="注册资本">{{ companyDetails.registeredCapital }} 万元</el-descriptions-item>
            <el-descriptions-item label="成立日期">{{ companyDetails.foundingDate }}</el-descriptions-item>
            <el-descriptions-item label="员工规模">{{ companyDetails.employeeScale }}</el-descriptions-item>
            <el-descriptions-item label="联系人">{{ companyDetails.contactName }}</el-descriptions-item>
            <el-descriptions-item label="联系电话">{{ companyDetails.contactPhone }}</el-descriptions-item>
            <el-descriptions-item label="联系邮箱">{{ companyDetails.contactEmail }}</el-descriptions-item>
            <el-descriptions-item label="合作状态">{{ companyDetails.cooperationStatus }}</el-descriptions-item>
            <el-descriptions-item label="合作项目数量">{{ companyDetails.cooperationProjectCount }}</el-descriptions-item>
            <el-descriptions-item label="技术需求倾向">{{ companyDetails.techDemandTendency }}</el-descriptions-item>
            <el-descriptions-item label="主营业务" :span="2">{{ companyDetails.mainBusiness }}</el-descriptions-item>
            <el-descriptions-item label="企业简介" :span="2">{{ companyDetails.companyProfile }}</el-descriptions-item>
            <el-descriptions-item label="备注" :span="2">{{ companyDetails.remarks }}</el-descriptions-item>
        </el-descriptions>
    </el-dialog>
    
    <!-- Excel导入弹窗 -->
    <el-dialog title="导入企业数据" :visible.sync="importVisible" width="500px">
        <el-upload
                class="upload-demo"
                drag
                :action="ms.manager + '/expertmanage/company/import'"
                :on-success="handleImportSuccess"
                :on-error="handleImportError"
                :before-upload="beforeImportUpload"
                :file-list="importFileList">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将Excel文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只支持.xlsx, .xls格式的Excel文件</div>
        </el-upload>
        <div class="import-template">
            <span>没有导入模板？</span>
            <el-button type="text" @click="downloadTemplate">下载模板</el-button>
        </div>
    </el-dialog>
</div>
</body>
</html>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            dataList: [], // 企业列表数据
            selectionList: [], // 多选数据
            total: 0, // 总记录数量
            pageNum: 1, // 当前页码
            pageSize: 10, // 每页显示条数
            loading: false, // 加载状态
            keyword: '', // 搜索关键字
            dialogVisible: false, // 表单弹窗显示状态
            detailsVisible: false, // 详情弹窗显示状态
            importVisible: false, // 导入弹窗显示状态
            importFileList: [], // 导入文件列表
            companyForm: {}, // 企业表单数据
            companyDetails: {}, // 企业详情数据
            rules: {
                companyCode: [
                    { required: true, message: '请输入企业编号', trigger: 'blur' }
                ],
                companyName: [
                    { required: true, message: '请输入企业名称', trigger: 'blur' }
                ],
                companyType: [
                    { required: true, message: '请选择企业类型', trigger: 'change' }
                ],
                industry: [
                    { required: true, message: '请输入所属行业', trigger: 'blur' }
                ],
                contactName: [
                    { required: true, message: '请输入联系人', trigger: 'blur' }
                ],
                contactPhone: [
                    { required: true, message: '请输入联系电话', trigger: 'blur' }
                ]
            }
        },
        methods: {
            // 查询企业列表
            list: function () {
                var that = this;
                that.loading = true;
                ms.http.get(ms.manager + "/expertmanage/company/list", {
                    params: {
                        pageNum: that.pageNum,
                        pageSize: that.pageSize,
                        keyword: that.keyword
                    }
                }).then(function (res) {
                    if (res.result) {
                        that.dataList = res.data.records;
                        that.total = res.data.total;
                    }
                    that.loading = false;
                });
            },
            // 重置表单
            resetForm: function() {
                this.companyForm = {};
                if (this.$refs.companyForm) {
                    this.$refs.companyForm.resetFields();
                }
            },
            // 显示新增企业弹窗
            handleAdd: function () {
                this.resetForm();
                this.dialogVisible = true;
            },
            // 显示编辑企业弹窗
            handleEdit: function (row) {
                this.resetForm();
                this.companyForm = JSON.parse(JSON.stringify(row));
                this.dialogVisible = true;
            },
            // 显示企业详情
            handleDetails: function (row) {
                this.companyDetails = row;
                this.detailsVisible = true;
            },
            // 保存企业信息
            saveCompany: function () {
                var that = this;
                this.$refs.companyForm.validate(function (valid) {
                    if (valid) {
                        var url = that.companyForm.id ? ms.manager + "/expertmanage/company/update" : ms.manager + "/expertmanage/company/save";
                        ms.http.post(url, JSON.stringify(that.companyForm)).then(function (res) {
                            if (res.result) {
                                that.$notify({
                                    title: '成功',
                                    message: '保存成功',
                                    type: 'success'
                                });
                                that.dialogVisible = false;
                                that.list();
                            } else {
                                that.$notify({
                                    title: '失败',
                                    message: res.msg,
                                    type: 'warning'
                                });
                            }
                        });
                    } else {
                        return false;
                    }
                });
            },
            // 删除企业
            handleDelete: function (index, row) {
                var that = this;
                this.$confirm('确认删除该企业？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function () {
                    ms.http.post(ms.manager + "/expertmanage/company/delete/" + row.id).then(function (res) {
                        if (res.result) {
                            that.$notify({
                                title: '成功',
                                message: '删除成功',
                                type: 'success'
                            });
                            that.list();
                        } else {
                            that.$notify({
                                title: '失败',
                                message: res.msg,
                                type: 'warning'
                            });
                        }
                    });
                }).catch(function () {});
            },
            // 批量删除
            handleDeleteAll: function () {
                if (this.selectionList.length == 0) {
                    this.$notify({
                        title: '提示',
                        message: '请选择要删除的企业',
                        type: 'warning'
                    });
                    return;
                }
                var that = this;
                this.$confirm('确认删除选中的企业？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function () {
                    var ids = [];
                    that.selectionList.forEach(function(item) {
                        ids.push(item.id);
                    });
                    ms.http.post(ms.manager + "/expertmanage/company/delete", JSON.stringify(ids), {
                        headers: {
                            'Content-Type': 'application/json'
                        }
                    }).then(function (res) {
                        if (res.result) {
                            that.$notify({
                                title: '成功',
                                message: '删除成功',
                                type: 'success'
                            });
                            that.list();
                        } else {
                            that.$notify({
                                title: '失败',
                                message: res.msg,
                                type: 'warning'
                            });
                        }
                    });
                }).catch(function () {});
            },
            // 分页页码改变
            handleCurrentChange: function (currentPage) {
                this.pageNum = currentPage;
                this.list();
            },
            // 多选改变
            handleSelectionChange: function (selection) {
                this.selectionList = selection;
            },
            // 搜索
            search: function () {
                this.pageNum = 1;
                this.list();
            },
            // 显示导入弹窗
            handleImport: function () {
                this.importVisible = true;
                this.importFileList = [];
            },
            // 上传文件前检查
            beforeImportUpload: function (file) {
                var isExcel = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || file.type === 'application/vnd.ms-excel';
                if (!isExcel) {
                    this.$message.error('上传文件只能是Excel格式!');
                    return false;
                }
                return true;
            },
            // 导入成功回调
            handleImportSuccess: function (response, file, fileList) {
                if (response.result) {
                    this.$notify({
                        title: '成功',
                        message: response.data,
                        type: 'success'
                    });
                    this.importVisible = false;
                    this.list();
                } else {
                    this.$notify({
                        title: '失败',
                        message: response.msg,
                        type: 'warning'
                    });
                }
            },
            // 导入失败回调
            handleImportError: function (err, file, fileList) {
                this.$notify({
                    title: '失败',
                    message: '导入失败，请检查文件格式',
                    type: 'error'
                });
            },
            // 下载模板
            downloadTemplate: function () {
                window.location.href = ms.manager + "/expertmanage/company/template";
            }
        },
        mounted: function () {
            this.list();
            this.resetForm();
        }
    });
</script>

<style>
    .ms-admin-company-container {
        margin: 12px;
        height: 100%;
    }
    
    .ms-container {
        height: calc(100% - 50px);
        padding: 0;
    }
    
    .ms-header {
        padding: 0;
        margin-bottom: 10px;
    }
    
    .ms-search {
        display: flex;
        align-items: center;
    }
    
    .ms-search .el-button {
        margin-left: 10px;
    }
    
    .ms-table {
        width: 100%;
    }
    
    .ms-pagination {
        margin-top: 20px;
        text-align: right;
    }
    
    .el-link {
        margin-right: 10px;
    }
    
    .import-template {
        margin-top: 10px;
        text-align: center;
    }
</style> 